<template>
  <div class="share-container">
    <!-- 分享 -->
    <div class="treasureChestBody-warp1">
      <div class="myLink">
        <div class="title">{{ lang.tc_my_link_title }}</div>
        <div class="box_link">
          <span class="share_link">{{ shareLink }}</span>
          <div class="btn heat_btn2" v-click-move @click="handleCopy(shareLink)">
            {{ lang.tc_more_btn }}
          </div>
        </div>
        <div class="title">{{ lang.tc_quick_share_title }}</div>
        <div class="QuickShare">
          <div v-for="item in sharePlatforms" :key="item.id" class="item heat_btn2" v-click-move @click="shareTo(item)">
            <NuxtImg :src="item.icon" />
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("ranking");

// 分享链接
const shareLink = ref("https://www.brz99.com/?code=4031730");

// 分享平台数据
const sharePlatforms = [
  {
    id: 1,
    platform: "facebook",
    name: lang.tc_plat_facebook,
    icon: "/images/share/treasureChest_1.png",
  },
  {
    id: 2,
    platform: "whatsapp",
    name: lang.tc_plat_whatsapp,
    icon: "/images/share/treasureChest_2.png",
  },
  {
    id: 3,
    platform: "telegram",
    name: lang.tc_plat_telegram,
    icon: "/images/share/treasureChest_3.png",
  },
  {
    id: 4,
    platform: "instagram",
    name: lang.tc_plat_instagram,
    icon: "/images/share/treasureChest_4.png",
  },
  {
    id: 5,
    platform: "twitter",
    name: lang.tc_plat_twitter,
    icon: "/images/share/treasureChest_5.png",
  },
  {
    id: 6,
    platform: "kwai",
    name: lang.tc_plat_kwai,
    icon: "/images/share/treasureChest_6.png",
  },
];

// 分享到指定平台
function shareTo(item: any) {
  showNotify({
    type: "success",
    message: `分享到${item.platform}`,
  });
}

// 复制文本
function handleCopy(text: string) {
  copyText(text);
}
</script>

<style scoped lang="scss">
.share-container {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}

.treasureChestBody-warp1 {
  background: #3f2e4b;
  padding: 0.32rem;
  box-sizing: border-box;
  border-radius: 0.32rem;
  flex-shrink: 0;
}

.myLink {
  width: 100%;

  .title {
    margin-bottom: 0.25rem;
    font-size: 0.38rem;
    color: var(--theme-neutral1);
  }

  .box_link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1rem;
    gap: 0.25rem;
    width: 100%;
    margin-bottom: 0.3rem;

    .share_link {
      height: 100%;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background: #2c1d31;
      border-radius: 0.2rem;
      border: 0.03rem solid var(--border-color);
      display: flex;
      align-items: center;
      padding: 0 0.4rem;
      font-family: Arial;
      font-size: 0.32rem;
      line-height: 0.36rem;
      color: #86718C;
    }

    .btn {
      width: 2.2rem;
      height: 1rem;
      border-radius: 0.2rem;
      background: #fd66b1;
      font-size: 0.38rem;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        transform: scale(1.05);
      }
    }
  }

  .QuickShare {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 16.67%);
    margin-top: 0.4rem;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0.17rem;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        transform: scale(1.1);
      }

      img {
        width: 1rem;
        height: 1rem;
      }

      p {
        font-size: 0.28rem;
        color: var(--theme-neutral1);
        margin: 0;
      }
    }
  }
}
</style>
